<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" session="false" %><%@
	include file="/WEB-INF/jspf/import.jspf" %>
<!doctype HTML>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta content="black" name="apple-mobile-web-app-status-bar-style" />
<meta content="telephone=no" name="format-detection" />
<meta id="twcClient" content="false" name="twcClient" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>车友会升级</title>
<meta name="keywords" content="汽车报价">
<meta name="description" content="太平洋汽车网为您提供最新报价信息，让您最快速查找到大众汽车最低价格。快速查询大众最新报价，就上太平洋汽车网。">
<meta name="Author" content="wangcaixia_gz none"/>
<link rel="stylesheet" type="text/css" href="http://js.3conline.com/wap/pcauto/2015/0409cyh_sx/up.css">
</head>
<body id="Jlazy_img">
<!--栏目计数器/文章计数器-->
         <jsp:include page="/template/wap/common/counter.jspf">
            <jsp:param name="channel" value="7378" />
        </jsp:include>
<div class="g-doc">

<div class="g-gift">
	<!-- 选中的样式是 m-pic-select  不可以选的样式是 m-pic-unalbe -->
	 <c:forEach var="gift" items="${pager.resultList}">
	    <c:if test="${levelId==1}">
	       <div class="m-pic ${levelId==1 && gift.isRequired==1 ? 'm-pic-select': rule.valuePoint-requireValuePoint < gift.valuePoint ? 'm-pic-unalbe':''}">
		</c:if>
		<c:if test="${levelId!=1}">
	       <div class="m-pic ${rule.valuePoint < gift.valuePoint ? 'm-pic-unalbe' : ''}">
		</c:if>
		<div class="zhe"></div>
		<img width="75" height="75" src="" #src="${gift.giftUrl}" />
		<div class="m-pic-tit">
			<p class="giftName">${gift.name}</p>
			<p>价值：<em>${gift.valuePoint}</em></p>
			<div class="m-pic-float">
				 <input type="hidden" value="${gift.isRequired}" class="isRequired" />
				 <input type="hidden" value="${gift.giftId}" class="giftId" />
				 <input type="hidden" class="valuePoint" value="${gift.valuePoint}">
				<input type="hidden" class="curNum" value="${gift.curNum}">
				<c:choose> 
					  <c:when test="${levelId==1 && gift.isRequired==1}">
						 <p>必选</p>
					 </c:when>
					 <c:otherwise>
					 	 <div class="m-pic-bord">
					        <span class="down"></span>
					      
					        <span><input type="tel" name="text" class="m-pic-inp" value="0"></span>
					        <span class="up"></span>
				         </div>
					 </c:otherwise>
				</c:choose>					
			</div>
		</div>
	</div>
	</c:forEach>
</div>


<div class="m-bottom m-add-bottom" >
	<p class="totalValue">总价值：<em>${rule.valuePoint}</em></p>
	<p class="leftValue">剩余价值：<em>0</em></p>
	<a href="javascript:void(0)" id="sureBtn" class="sure disable" >确认</a>  <!-- 不可用加样式disable -->
</div>

<div class="m-certify" id="Jcertify"></div>
<script src="http://js.3conline.com/wap/2013/common/js/zepto.min.js"></script>
<script src="http://js.3conline.com/wap/common/wap.lazy-min.js"></script>


<script>
var Jcertify = $('#Jcertify');
var valupoint = ${rule.valuePoint};
var requireValuePoint = ${requireValuePoint};
var clubValuePoint = parseInt(valupoint) - parseInt(requireValuePoint);
var levelId = ${levelId};
$(".m-bottom .leftValue em ").text(clubValuePoint);
//按钮增加
$('.m-pic .m-pic-bord .up').bind('click',function(){
	var $li = $(this).parents('.m-pic'),
	    $inp = $li.find('.m-pic-inp'),
	    $valuePoint = $li.find('.valuePoint'),
	    $curNum =  $li.find('.curNum');
	    if(parseInt($curNum.val()) >= (parseInt($inp.val())+1)){
		    if(clubValuePoint >= parseInt($valuePoint.val())){
		    	clubValuePoint -=  parseInt($valuePoint.val());
		    	$(".m-bottom .leftValue em").text(clubValuePoint);
				$inp.val(parseInt($inp.val())+1);
				if(parseInt($inp.val())>0){
					$li.addClass('m-pic-select');
				}
		    }else{
		    	  Jcertify.html('您的价值点数不足，无法添加数量').show();
			      setTimeout(function(){Jcertify.hide()},2000);
		    }
		    initLeftValuePoint();
       }else{
    	   Jcertify.html('礼包库存不足').show();
	       setTimeout(function(){Jcertify.hide()},2000);
    		var leftPoint = parseInt(initLeftValuePoint());
    		$(".m-bottom .leftValue em").text(leftPoint);
    	    $inp.val(parseInt($inp.val()));
       }
})

//手动输入
$('.m-pic .m-pic-bord .m-pic-inp').bind('change',function(){
	var $li = $(this).parents('.m-pic'),
    $curNum =  $li.find('.curNum');
    if(parseInt($curNum.val()) >= parseInt($(this).val())){
		if(parseInt($(this).val())>0){
			$li.addClass('m-pic-select');		
			var leftPoint = parseInt(initLeftValuePoint());
			if(leftPoint < 0){
				Jcertify.html('您的价值点数不足，无法添加数量').show();
			    setTimeout(function(){Jcertify.hide()},2000);
				$(this).val('0');
				$li.removeClass('m-pic-select');
			}
			leftPoint = parseInt(initLeftValuePoint());
			$(".m-bottom .leftValue em").text(leftPoint);
		}else{		
			$(this).val('0');
			$li.removeClass('m-pic-select');
			var leftPoint = parseInt(initLeftValuePoint());
			$(".m-bottom .leftValue em").text(leftPoint);
		}
    }else{
    	$(this).val('0');
		var leftPoint = parseInt(initLeftValuePoint());
		$(".m-bottom .leftValue em").text(leftPoint);
		$li.removeClass('m-pic-select');
    	Jcertify.html('礼包库存不足!').show();
	    setTimeout(function(){Jcertify.hide()},2000);
    }
})

function initLeftValuePoint(){
	var totalValuePoint = 0;
	$(".m-pic-select").each(function(){
		var point = parseInt($(this).find(".valuePoint").val());
		if(levelId == 1){
			var isRequired = $(this).find(".isRequired").val();
			if(isRequired == 0){
				var giftNum = parseInt($(this).find(".m-pic-inp").val());
				if(giftNum < 0){
					giftNum = 0;
				}
				totalValuePoint += point*giftNum;
			}else{
				totalValuePoint += point;
			}
		}else{
			var giftNum = parseInt($(this).find(".m-pic-inp").val());
			if(giftNum < 0){
				giftNum = 0;
			}
			totalValuePoint += point*giftNum;
		}
	});
	var leftPoint  = parseInt(valupoint) - totalValuePoint ;
	clubValuePoint = leftPoint;
	if(leftPoint==0){
		$("#sureBtn").attr("onclick","return sureSelectGift();").removeClass("disable");
	}else{
		$("#sureBtn").removeAttr("onclick").addClass("disable");
	}
	return leftPoint;
}

//按钮减少
$('.m-pic .m-pic-bord .down').bind('click',function down(){
	var $liD = $(this).parents('.m-pic'),
		$inpD = $liD.find('.m-pic-inp');
	if(parseInt($inpD.val())>0){
		$valuePoint = $liD.find('.valuePoint');
		clubValuePoint +=  parseInt($valuePoint.val());
		$inpD.val(parseInt($inpD.val())-1);
		$(".m-bottom .leftValue em").text(clubValuePoint);
		$("#sureBtn").removeAttr("onclick","return sureSelectGift();").addClass("disable");
	}
	if(parseInt($inpD.val())==0){
		$liD.removeClass('m-pic-select');
	}

});



function sureSelectGift(){
	    if(clubValuePoint >0){
	    	Jcertify.html("您还有"+clubValuePoint+"价值点没使用，请先分配后再升级").show();
		    setTimeout(function(){Jcertify.hide()},2000);
		    return;
	    } 
    	var giftStr = "[";
    	var redBord = $(".m-pic-select");
    	var len=redBord.length;
    	$(".m-pic-select").each(function(i){
    		var giftArrary = "{"
    		var giftId = $(this).find(".giftId").val();
    		var valuePoint = parseInt($(this).find(".valuePoint").val());   
    		if(levelId == 1){
	    		var isRequired = $(this).find(".isRequired").val();
	    		if(isRequired == 0){
	    			var num = parseInt($(this).find(".m-pic-inp").val());
	    			giftArrary += "giftId:"+giftId+",valuePoint:"+valuePoint*num+",num:"+num;
	    		}else{
	    			giftArrary += "giftId:"+giftId+",valuePoint:"+valuePoint+",num:1";
	    		}
    		}else{
    			var num = parseInt($(this).find(".m-pic-inp").val());
    			giftArrary += "giftId:"+giftId+",valuePoint:"+valuePoint*num+",num:"+num;
    		}
    		giftArrary += "}"; 
    		if(i == (len-1)){
    			giftStr += giftArrary+"]";
    		}else{
    			giftStr += giftArrary+",";
    		}
    		
    	});
    	window.location.href = "${WAPROOT}/uplevel/goUpgradeGiftInfo.do?levelId=${levelId}&clubId=${clubId}&giftStr="+giftStr+"&from=${from}&${userSessionName}=${commonsessionId}";    
}

	

</script>
<script>
// 按需加载
var jsList_ = [];
var xx = Lazy.create({
    lazyId: "Jlazy_img",
    trueSrc: '#src',
    jsList: jsList_,
    offset: 300,
    delay: 100,
    delay_tot: 1000
});
Lazy.init(xx);
</script>

</div>
</body>
</html>
